<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Test</title>
  <link href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.js"></script>
  <script src="/static/js/DPlayerSet.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="dplayer"></div>
<script>
  var preview = true;
  var canSeek = true;
  var $ = window.parent.$;
  var localKey = 'video_seek_time_${user.id}_${kid}_${tid}';
  var container = document.getElementById('dplayer');
  var wrap = window.parent.document.querySelector(".all-wrapper");
  var height = 400;
  if (wrap != null) {
    preview = false;
    height = wrap.clientHeight - 2;
  }
  if (preview) {
    localKey = localKey + "_pv";
  }

  var dp = new DPlayer({
    container: container,
    video: {
      pic: 'http://img.zcool.cn/community/01f09e577b85450000012e7e182cf0.jpg',
      type: 'auto',
      quality: [{
        name: '流畅',
        url: '${material.path}'
      }],
      defaultQuality: 0
    },
    autoplay: true
  }).DPlayerSet();

  container.style.height=height + "px";
  // 全屏事件
  dp.on('fullscreen', function () {
    container.style.height="100%";
  });
  // 取消全屏事件
  dp.on('fullscreen_cancel', function () {
    container.style.height=height + "px";
  });

  dp.on('play', function () {
    if (canSeek) {
      var seek = localStorage.getItem(localKey) || 0;
      dp.seek(seek);
      canSeek = false;
    }
  });

  dp.on('ended', function () {
    var time = parseInt(dp.video.duration);
    updateTime(time, 100);
  });

  window.setInterval(function (e) {
    var allTime = parseInt(dp.video.duration);
    var currentTime = parseInt(dp.video.currentTime);
    if (currentTime != null) {
      if (!preview) {
        var rate = parseInt((currentTime / allTime) * 100);
        if (window.parent.TSVM.task.goal === 1) { // 完成条件判断
          if (currentTime >= window.parent.TSVM.task.minTime) {
            rate = 100;
          }
        }
        updateTime(currentTime, rate);
      }
      localStorage.setItem(localKey, currentTime);
    }
  }, 10000);

  function updateTime(time, rate) {
    if (window.parent.TSVM.task.learnTask != null) {
      var ltid = window.parent.TSVM.task.learnTask.id;
      rate = rate + 5;
      console.log("ltid: " + ltid + " time: " + time + " rate: " + rate);
      $.post('/course/task/api/${kid}/updateTime/' + ltid, {t: time, r: rate});
      if (rate >= 100) {
        window.parent.document.querySelector('.js-btn-learn').classList.add('active');
      }
    }
  }
</script>
</body>
</html>
